<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>screen shot demo</title>
  <script src="https://unpkg.com/vue@3.2.21/dist/vue.global.prod.js"></script>
  <script src="./screenShotPlugin.umd.js"></script>
  <script>
    function setViewSize() {
      document.body.style.width = window.innerWidth+"px"
      document.body.style.height = window.innerHeight+"px"
    }
    window.onload = ()=>{
      setViewSize()
    }
    window.addEventListener("resize", function() {
      setViewSize()
    });
  </script>
  <style>
      *{
          margin: 0;
          padding: 0;
      }
      #app {
          width: 100%;
          height: 100%;
      }
      #app img {
          width: 100%;
          height: auto;
      }
  </style>
  <script type="text/javascript">

    document.addEventListener('DOMContentLoaded', () => {
      const { createApp,ref } = Vue
      const app = {
        setup() {
          const showState = ref(false)
          const destroyComponent = (state) => {
            showState.value = state
            console.log(showState.value);
          }
          const getImg = (base64)=>{
            console.log(base64);
          }
          const handleErr = (err)=> {
            console.log("屏幕流获取失败", err);
          }
          const modifyState = (state)=>{
            showState.value = state
            console.log(showState.value);
          }
          return {
            showState,
            destroyComponent,
            getImg,
            modifyState,
            handleErr
          }
        }
      }
      createApp(app)
        .use(screenShotPlugin)
        .mount('#app')
    })
  </script>
</head>
<body>
<div id="app">
  <div>
    截图插件文字展示
  </div>
  <br/>
  <button @click="modifyState(true)">点我截图</button>
  <p>图片展示</p>
  <img src="./demo-img.jpeg" alt="" width="1920">
  <screen-short v-if="this.showState"
                :key="new Date().getTime()"
                @destroy-component="destroyComponent"
                @get-image-data="getImg"
                @webrtc-error="handleErr"
  >
  </screen-short>

</div>
</body>
</html>
